<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    视口，调整页面适应移动端
                width=device-width：页面宽度与设备宽度一致
                initial-scale=1：初始缩放为1，即不会缩放
                minimum-scale=1：最小缩放比
                maximum-scale=1：最大缩放比
                user-scalable=no：用户自定缩放
        -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>书本购物车</title>
    <link href="../0918/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--    如下第三方库的JS一般写在head标签中-->
    <script src="../0918/js/jquery-3.5.1.js"></script>
    <script src="../0918/bootstrap/js/bootstrap.js"></script>
    <style>
        .collapse .navbar-nav {
            position: absolute;
            right: 0;
            top: -5px;
        }

        .breadcrumb {
            margin: 7px;
            display: inline-block;
        }

        .text-red {
            color: #FF0000;
        }

        .list-group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .flex-content {
            display: flex;
            justify-content: space-between;
        }

        .jumbotron {
            background-color: white;
            border: solid 1px #ededed;
        }

        #content_div {
            padding: 0 15px 0 15px;
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <!--    头部开始-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">书本商城</a>
            </div>

            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            <span> Admin </span>
            <span class="text-red"> 欢迎您，系统管理员 </span>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false"><img width="30" src="img/systemAdministrator.jpg" class="img-circle">
                        </a>

                        <ul class="dropdown-menu">
                            <li><a href="#">个人信息</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">注销</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--    头部结束-->
    <!--    中间内容-->
    <div class="row flex-content">
        <!--        左边菜单开始-->
        <div class="col-md-2" style="width: 210px;">
            <div class="list-group">
                <a href="#" class="list-group-item">
                    首页 <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                </a>
                <a href="#" class="list-group-item active">书本商城 <span class="glyphicon glyphicon-menu-right"
                                                                      aria-hidden="true"></span></a>
            </div>
        </div>
        <!--        左边菜单结束-->
        <div class="col-md-9 col-sm-9 col-xs-9" style="flex: 1;margin: 0; padding: 0;">
            <div id="content_div" class="jumbotron">
                <h3>书本购物车</h3>
                <div class="panel panel-default">
                    <div class="panel-heading flex-content">
                        <form class="form-inline">
                            <div class="form-group input-group-sm">
                                <input type="text" class="form-control" name="name" placeholder="姓名">
                            </div>
                            <div class="form-group input-group-sm">
                                <input type="text" class="form-control" name="phone" placeholder="手机号">
                            </div>
                            <div class="form-group input-group-sm ">
                                <select class="form-control">
                                    <option value="-1">请选择性别</option>
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>
                            </div>
                            <div class="form-group input-group-sm">
                                <select class="form-control">
                                    <option value="-1">请选择宿舍楼</option>
                                    <option value="0">第一栋宿舍楼</option>
                                    <option value="1">第二栋宿舍楼</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-default btn-sm"><span
                                    class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </form>
                        <div>
                            <button type="button" class="btn btn-sm btn-success">添加</button>
                            <button type="button" class="btn btn-sm btn-danger">批量删除</button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table id="table" class="table table-striped table-bordered table-hover">

                        </table>
                        <div class="flex-content" style="align-items: center;">
                            <div>
                                共<span class="label label-danger">20</span>条记录
                            </div>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <select class="form-control" style="width: auto;">
                                <option>5</option>
                                <option>10</option>
                                <option>20</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let books = [
        {id: 1, name: 'Java从入门到放弃', price: 80, createDate: '2020-07-01', count: 1},
        {id: 2, name: 'Vue从入门到放弃', price: 90, createDate: '2020-07-02', count: 1},
        {id: 3, name: 'Mysql从入门到放弃', price: 100.01, createDate: '2020-07-03', count: 1},
        {id: 4, name: '啥都从入门到放弃', price: 70.0001, createDate: '2020-07-04', count: 1},
        {id: 5, name: 'JavaScript从入门到放弃', price: 60.00, createDate: '2020-07-04', count: 1},
        {id: 6, name: 'JavaScript从入门到放弃', price: 50.00, createDate: '2020-07-04', count: 1}
    ];

    let table = document.querySelector("#table");
    let titles = ["<input type='checkbox' value='1' name='cb_select_all'>", "序号", "书名", "日期", "单价", "数量", "操作"];

    function createThead(titles, table) {
        if (!Array.isArray(titles)) {
            throw new Error("titles 必须是一个数组");
        }
        let thead = table.createTHead();
        let tr = document.createElement("tr");
        thead.appendChild(tr);
        titles.forEach(value => {
            let th = document.createElement("th");
            th.innerHTML = value;
            th.style.textAlign = "center";
            tr.appendChild(th);
        })
    }

    createThead(titles, table);

    function createTBody(data, table) {
        if (!Array.isArray(data)) {
            throw new Error("data 必须是一个数组");
        }
        let tbody = table.createTBody();
        data.forEach(value => {
            let tr = document.createElement("tr");
            tbody.appendChild(tr);
            let td = document.createElement("td");
            td.style.textAlign = "center";
            td.innerHTML = "<input type='checkbox' value='1' name='cb_select'>";
            tr.appendChild(td);
            for (let key in value) {
                let td = document.createElement("td");
                td.innerHTML = value[key];
                td.style.textAlign = "center";
                td.style.verticalAlign = "middle";
                tr.appendChild(td);
            }
            td = document.createElement("td");
            td.style.textAlign = "center";
            td.innerHTML = `
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">编辑</button>
  <button type="button" class="btn btn-danger">删除</button>
</div>`;
            tr.appendChild(td);
        })
    }

    createTBody(books, table);
</script>
</body>
</html>